<%--
  读书主页面
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/8/14 0014
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page  import="java.util.*" language="java"  pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../base/header.jsp"%>
<!--此标签的作用告诉浏览器按照W3c标准来解析此页面-->
<!DOCTYPE html>
<!--加上此标签所有css组件的引用都会有自动提示，便于代码的开发-->
<html lang="zh-CN">
<html>
<head>
  <title>图书主页面</title>
  <style type="text/css">
    .myTitle{
      color: #080808;
      font-size: large;
    }
    .myFont{
      color: #357ebd;
      font-size: small;
      margin-top: 5px;
      margin-bottom: 1px;
    }
    .myFont_1{
      color: #357ebd;
      font-size: small;
    }
    .article{
      color:  #080808;
      font-size: large;
      background-color: #dbdbdb;
      text-indent: 2em;
    }
    .article_content{
      color: #080808;
      font-size: small;
    }
    .bootStyle{
      border-top: 1px solid #d5d5d5;
      margin-top: 100px;
    }
    .pic{
      width: 40px;
    }
    .msgFont{
      color: #808080;
      font-size: smaller;
      margin-top: 8px;
    }
    .title{
      font-weight: bold;
      padding-top: 15px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
    }
    .author{
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
    }
    .authorFont{
      font-size: small;
      margin-top: 0px;
      margin-bottom: 0px;
    }
    .abstract{
      /*padding-top: 10px;*/
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 10px;
      text-align: left;
    }
    .myTooltip{
      min-width: 300px;
      min-height: 100px;
      background-color: #dcdcdc;
      color: #000000
    }
  </style>
</head>
<body>
<!--页头-->
<div class="jumbotron">
  <div class="container">
    <nav class="navbar">
      <div class="container-fluid">
        <%--<div class="navbar-header">--%>
          <%--<a class="navbar-brand" href="#">--%>
            <%--<img alt="Brand" src="/images/png/logo.png">--%>
          <%--</a>--%>
        <%--</div>--%>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" class="myTitle">分享 <span class="sr-only">(current)</span></a></li>
            <li class="active"><a href="#" class="myTitle">书评 <span class="sr-only">(current)</span></a></li>
            <li class="active"><a href="book/read_circle.htm" class="myTitle">我的圈子 <span class="sr-only">(current)</span></a></li>
          </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="书名/作者">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#" data-toggle="modal" data-target="#suggest" style="color: #080808;font-weight: 800">请帮助我们变得更好</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <img src="http://139.129.12.155:8089/touxiang3.jpg" alt="..." class="img-circle pic">
              &nbsp;&nbsp;${user.name}的账号 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="user/get_profile.htm">个人资料</a></li>
              <li><a href="#">修改密码</a></li>
              <li><a href="" data-toggle="modal" data-target="#upload" onclick="clearForm()">上传电子书</a></li>
              <%--<li role="separator" class="divider"></li>--%>
              <li><a href="user/logout.htm">退出</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<!--主体内容-->
<div class="container">
  <h5>图书推荐...</h5>
  <div class="row">
    <div class="col-sm-6 col-md-8">
      <div class="row">
        <div class="row">
          <c:forEach items="${recBookList}" var="recBook">
            <div class="col-sm-6 col-md-2">
              <div class="thumbnail">
                <a href="">
                  <img src="http://139.129.12.155:8089/${recBook.image}" alt="${recBook.image}的封面"
                       class="" data-placement="right" style="height: 120px; width: 100px"
                       data-toggle="tooltip" id="myImage${recBook.id}">
                </a>
                <c:choose>
                  <c:when test="${recBook.name.length() > 6}">
                    <p class="myFont text-nowrap">${recBook.name.substring(0,6)}...</p>
                  </c:when>
                  <c:otherwise>
                    <p class="myFont text-nowrap">${recBook.name}</p>
                  </c:otherwise>
                </c:choose>
                <c:choose>
                  <c:when test="${recBook.author.length() > 6}">
                    <p class="authorFont text-nowrap">${recBook.author.substring(0,6)}...</p>
                  </c:when>
                  <c:otherwise>
                    <p class="authorFont text-nowrap">${recBook.author}</p>
                  </c:otherwise>
                </c:choose>
              </div>
            </div>
          </c:forEach>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="page-header" style="margin-top: 0px;">
        <h5 class="">
          <span class="">热门标签</span>
          <a class="" href="#">所有热门标签»</a>
        </h5>
      </div>
      <span class="">文学</span><br>
      <span class="label label-default">小说</span>
      <span class="label label-default">散文</span>
      <span class="label label-default">随笔</span>
      <span class="label label-default">日本文学</span>
      <span class="label label-default">通话</span>
      <span class="label label-default">诗歌</span>
      <span class="label label-default">更多...</span>
      <br><br><span class="">流行</span><br>
      <span class="label label-default">漫画</span>
      <span class="label label-default">绘本</span>
      <span class="label label-default">推理</span>
      <span class="label label-default">青春</span>
      <span class="label label-default">言情</span>
      <span class="label label-default">科幻</span>
      <span class="label label-default">更多...</span>
      <br><br><span class="">文化</span><br>
      <span class="label label-default">历史</span>
      <span class="label label-default">哲学</span>
      <span class="label label-default">传记</span>
      <span class="label label-default">设计</span>
      <span class="label label-default">建筑</span>
      <span class="label label-default">电影</span>
      <span class="label label-default">更多...</span>
      <br><br><span class="">生活</span><br>
      <span class="label label-default">旅行</span>
      <span class="label label-default">励志</span>
      <span class="label label-default">职场</span>
      <span class="label label-default">美食</span>
      <span class="label label-default">教育</span>
      <span class="label label-default">灵修</span>
      <span class="label label-default">健康</span>
      <span class="label label-default">家具</span>
      <span class="label label-default">更多...</span>
      <br><br><span class="">经管</span><br>
      <span class="label label-default">经济学</span>
      <span class="label label-default">管理</span>
      <span class="label label-default">金融</span>
      <span class="label label-default">商业</span>
      <span class="label label-default">营销</span>
      <span class="label label-default">理财</span>
      <span class="label label-default">股票</span>
      <span class="label label-default">企业史</span>
      <span class="label label-default">更多...</span>
      <br><br><span class="">科技</span><br>
      <span class="label label-default">科普</span>
      <span class="label label-default">互联网</span>
      <span class="label label-default">编程</span>
      <span class="label label-default">交互设计</span>
      <span class="label label-default">算法</span>
      <span class="label label-default">通信</span>
      <span class="label label-default">神经网络</span>
      <span class="label label-default">更多...</span>
    </div>
  </div>

  <h5>热门书评...</h5>
  <div class="row">
    <div class="col-sm-6 col-md-8">
      <c:forEach items="${commentList}" var="comment">
        <div class="row">
          <div class="col-sm-6 col-md-2">
            <a href="#" class="thumbnail">
              <img src="http://139.129.12.155:8089/${comment.image}" alt="${comment.bookName}的封面"
                   style="height: 120px; width: 100px">
            </a>
          </div>
          <div class="col-sm-6 col-md-10" style="margin-left: 0px;">
            <p class="article">${comment.bookName}</p>
            <p class=""><span class="myFont_1">${comment.userName}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="myFont_1">${comment.addTime}</span></p>
            <p class="article_content"><a href="#" style="color: #000000">${comment.content}</a> </p>
          </div>
        </div>
      </c:forEach>
    </div>

    <div class="col-sm-6 col-md-4">
      <div class="page-header" style="margin-top: 0px;">
        <h5 class="">
          <span class="">热门搜索榜</span>
          <a href="">更多»</a>
        </h5>
      </div>
      <ol>
      <c:forEach items="${hotBookList}" var="hotBook">
        <li>
          <a href="#">${hotBook.name}</a> <br/>
            ${hotBook.author}
        </li>
      </c:forEach>
      </ol>
    </div>
  </div>
</div>
<div class="row">
  <div class="container bootStyle">
    <p class="text-center">design by：<a>bob.yang</a></p>
  </div>
</div>

<!--模态框-->
<div class="modal fade" id="upload" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          上传电子书
        </h4>
      </div>
      <form id="addBook" target="if" action="book/upload.htm" enctype="multipart/form-data" method="post" class="form-horizontal">
        <div class="modal-body">
          <fieldset>
            <div class="form-group">
              <div class="row">
                <div class="col-sm-3 ">
                  <label for="upload" class="control-label pull-right">书名：</label>
                </div>
                <div class="col-sm-5">
                  <input type="text" class="form-control" id="bookName" name="bookName"
                         placeholder="请输入书名！">
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-sm-3 ">
                  <label for="upload" class="control-label pull-right">作者：</label>
                </div>
                <div class="col-sm-5">
                  <input type="text" class="form-control" id="bookAuthor" name="bookAuthor"
                         placeholder="请输入作者名字！">
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-sm-3">
                  <label for="upload" class="control-label pull-right">出版时间：</label>
                </div>
                <div class="col-sm-5">
                  <div class="controls input-append date form_date" data-date="" data-date-format="yyyy-mm-dd"
                       data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" placeholder="请选择出版日期！">
                    <input type="text" class="form-control" name="bookPublishDate" id="bookPublishDate" readonly>
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                  </div>
                  <input type="hidden" id="dtp_input2" value="" />
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-sm-3 ">
                  <label for="upload" class="control-label pull-right">封面：</label>
                </div>
                <div class="col-sm-5">
                  <input type="file" class="form-control pull-right" id="bookImage" name="bookImage"
                         placeholder="请上传电子书封面！">
                </div>
                <div class="col-sm-4">
                  <label for="upload" class="control-label msgFont">最大支持10M图片</label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="row">
                <div class="col-sm-3">
                  <label for="upload" class="control-label pull-right">选择封面：</label>
                </div>
                <div class="col-sm-2">
                  <input type="button" class="btn btn-primary" onclick="imageCut()" value="选择">
                </div>
                <div class="col-sm-3">
                  <input type="text" id="picName" name="picName" class="form-control" readonly>
                </div>
              </div>
            </div>

            <input type="text" id="strImage" name="strImage" style="display: none" class="form-control">

            <div class="form-group">
              <div class="row">
                <div class="col-sm-3 ">
                  <label for="upload" class="control-label pull-right">电子书：</label>
                </div>
                <div class="col-sm-5">
                  <input type="file" class="form-control pull-right" id="bookFile" name="bookFile"
                         placeholder="请上传电子书！">
                </div>
                <div class="col-sm-4">
                  <label for="upload" class="control-label msgFont">最大支持20M电子书</label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-sm-3 ">
                  <label for="upload" class="control-label pull-right">图书简介：</label>
                </div>
                <div class="col-sm-5">
                  <textarea class="form-control" id="bookIntroduction" name="bookIntroduction"
                            placeholder="请输入图书简介(200字内)" maxlength="200"></textarea>
                </div>
              </div>
            </div>
          </fieldset>
        </div>
        <IFRAME id="if" name="if" src="about:blank" frameborder='0' style="display: none"></IFRAME>
        <div class="modal-footer">
          <div class="col-md-6">
            <button type="submit" class="btn btn-primary">
              上传
            </button>
            <button type="button" class="btn btn-default"
                    data-dismiss="modal" id="close">关闭
            </button>
            <button type="reset" class="btn btn-default">
              重置
            </button>
          </div>
        </div>
        </form>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal -->

</body>
<script>
  // 上传图书反馈方法
  function callback(rs){
    if(rs == 0){
      alert("上传成功！");
      $("#close").click();
    } else if (rs == 1) {
      alert("图片大小超过限制！");
    } else if (rs == 2) {
      alert("文件大小超过限制！");
    } else if (rs == 11) {
      alert("封面格式不正确！");
    } else if (rs == 12) {
      alert("电子书格式不正确！");
    } else if (rs == 13) {
      alert("上传出错！");
    }
  }

  // 弹出图片裁剪画面
  function imageCut() {
    window.open('/page/book/book_image_cut.jsp','_blank');
  }


  <c:forEach items="${recBookList}" var="recBook">
    $("#myImage${recBook.id}").tooltip({
      trigger:'hover',
      html:true,
      title:'<div><h4 class="title">${recBook.name}</h4><p class="author"><span>${recBook.author}</span>/<span>${recBook.publishDate}</span>/<span>${recBook.publisher}</span></p><p class="abstract">${recBook.introduction}</p></div>'
    });
  </c:forEach>


  $('.form_date').datetimepicker({
    language: 'zh-CN',
    format: 'yyyy-mm-dd',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
  });

  // 清空表单数据
  function clearForm() {
    $("#addBook").resetForm();
  }
</script>
</html>
